<template>
	<view class="pad-lr-20 content">
		<view class="pad-lr-20 pad-tb-20 radius-16 bgfff mar-top-20" v-for="item in bankCardList" :key="item.id">
			<view class="display-sb align-items">
				<view class="flex-1">
					<view class="display-sb align-items mar-top-10">
						<view class="fontSize-30 fontBold">{{item.bank_title || '银行名称'}}</view>
						<view class="display align-items" v-if="item.is_default==1">
							<view class="tags_view radius-4 pad-lr-10 pad-tb-4 fontSize-22 col-f">默认银行卡</view>
						</view>
					</view>
					<view class="fontSize-28 col-6 mar-top-16">{{formatCardNumber(item.bank_number)}}</view>
				</view>
				<view class="display-row-reverse">
					<view class="display align-items pad-lr-30 border_left_f1" @click.stop="goBankCardAdd(item.id, item)">
						<image src="/static/img/edit square.png" class="proudct-item-icon-15" mode=""></image>
						<view class="fontSize-26 col-9 ml10">编辑</view>
					</view>
					<view class="display align-items pad-lr-30" @click.stop="delBankCard(item.id)">
						<image src="/static/img/trash.png" class="proudct-item-icon-15" mode=""></image>
						<view class="fontSize-26 col-9 ml10">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="display-ce align-items width-100" v-if="bankCardList.length==0">
			<tm-result :showBtn="false" subTitle=" " title="暂无数据" color="#bc8c1e"></tm-result>
		</view>
		<view class="poFi bottom-0 bgfff new_view width-100 left-0">
			<view class="col-f text-align-center fontSize-32 radius-40 new_btn" @click="goBankCardAdd('')">添加银行卡</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {bankCardList as getBankCardList,delBankCard as deleteBankCard} from '@/utils/api'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { ref } from 'vue';

interface BankCard {
	id: number;
	real_name: string; // 用户姓名
	bank_number: string; // 银行卡号（后端字段名）
	bank_title: string; // 银行名称
	branch_name?: string; // 支行名称
	tel?: string; // 电话号
	sfz_num?: string; // 身份证
	is_default: number; // 1=是 0=否
}

onLoad(()=>{
	_bankCardList()
})

onShow(()=>{
	uni.$on('addBankCard',()=>{
		_bankCardList()
	})
})

onUnload(()=>{
	uni.$off('addBankCard')
})

const bankCardList = ref<BankCard[]>([])//银行卡列表

const _bankCardList =() =>{
	getBankCardList({}).then((res: any)=>{
		if(res.code==1){
			bankCardList.value = res.data.address || res.data || []
		}
	})
}

//格式化卡号显示（只显示后4位，其余用*代替）
const formatCardNumber = (cardNumber: string) => {
	if(!cardNumber) return ''
	const len = cardNumber.length
	if(len <= 4) return cardNumber
	const lastFour = cardNumber.slice(-4)
	const stars = '*'.repeat(len - 4)
	return stars + ' ' + lastFour.match(/.{1,4}/g)?.join(' ') || lastFour
}

// 身份证号脱敏显示（显示前1后1位）
const formatIdNumber = (id: string) => {
    if(!id) return ''
    if(id.length <= 2) return id
    const head = id.slice(0,1)
    const tail = id.slice(-1)
    return head + '*'.repeat(id.length - 2) + tail
}

//删除银行卡
const delBankCardItem =(id:number) =>{
	uni.showModal({
		title: '提示',
		content: '是否删除该银行卡',
		success: function (res) {
			if (res.confirm) {
				deleteBankCard({id:id}).then((res: any)=>{
					if(res.code==1){
						uni.showToast({
							title: res.msg || '删除成功',
							icon: 'success'
						})
						bankCardList.value.forEach((item,index)=>{
							if(item.id==id){
								bankCardList.value.splice(index,1)
							}
						})
					} else {
						uni.showToast({
							title: res.msg || '删除失败',
							icon: 'none'
						})
					}
				}).catch((err: any) => {
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				})
			}
		}
	});
}

// 重命名函数，避免与 API 函数名冲突
const delBankCard = (id: number) => {
	delBankCardItem(id)
}

const goBankCardAdd =(id: string | number, item?: BankCard) =>{
	let url = '/mypages/bankcardadd/bankcardadd'
	if(id){
		// 编辑时携带完整信息，避免额外详情接口
		const infoStr = encodeURIComponent(JSON.stringify(item))
		url += `?id=${id}&info=${infoStr}`
	}
	uni.navigateTo({ url })
}
</script>

<style lang="scss">
@import 'bankcardlist.scss';
</style>

